<template>
    <div class="content">
        <headerSetCom>
            <template #title-content>
                <div>
                    <van-search class="search" v-model="values" shape="round" placeholder="请输入搜索关键词" @blur="SearchClick"
                        @clear="clearClick" />
                </div>
            </template>
        </headerSetCom>

        <div class="citys">
            <van-sidebar v-model="active">
                <van-sidebar-item v-for="item,  in citylisten" :key="item.id" :title="item.名称" class="tab"
                    @click="changeClick(item.id)">

                </van-sidebar-item>
            </van-sidebar>
            <div class="city">
                <van-grid :column-num="2">
                    <van-grid-item v-for="item in cityshow" :icon="item.image_url" :text="item.name"
                        @click="detialclick(item.id, item.category_id)" />
                </van-grid>
            </div>
        </div>

    </div>
</template>


<script lang="ts" setup>
import { regionsFn, categoryFn, searchRegions, spotDetailsFn } from '@/API/changgeCity/changeCity';
import headerSetCom from '@/components/headerSetCom/headerSetCom.vue';
import { onMounted, ref, type Ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const citylisten = ref()
const cityshow = ref()
const values = ref()
const active = ref(0);
onMounted(() => {
    regionsFn().then(res => {
        console.log(res)
        citylisten.value = res.data
        if (res.data.length > 0) {
            changeClick(res.data[0].id);
            console.log(changeClick(res.data[0].id))
        }
        console.log(citylisten.value)
    })
})

// 点击切换左侧tab
function changeClick(id: number) {
    console.log(id)
    categoryFn(id).then(res => {
        cityshow.value = res.data
        console.log(res)
    })
}


// 搜索
function SearchClick() {
    console.log('出发了', values.value)
    if (!values.value) {
        return
    } else {
        searchRegions(String(values.value)).then(res => {
            cityshow.value = res.data
            if (res.data.length > 0) {
                // 更新 active，使左侧的 Tab 即时同步至搜索结果
                active.value = res.data[0].id // 假设 res.data[0].id 是当前选中城市的 id    通过id更新当前选中状态
                console.log('搜索后的活跃城市 id:', active.value)
            }
        })
    }

}

// 清空搜索框
function clearClick() {
    regionsFn().then(res => {
        console.log(res)
        citylisten.value = res.data
        if (res.data.length > 0) {
            changeClick(res.data[0].id);
            console.log(changeClick(res.data[0].id))
            active.value = 0
        }
        console.log(citylisten.value)
    })
}




// 进入详情页
function detialclick(category_id: number, id_Id: number) {
    console.log(category_id)
    router.push({
        query: {
            id: category_id,
            id_id: id_Id,
        },
        name: 'eidicty'
    })
    // router.push('/eidicty')
    spotDetailsFn(category_id).then(res => {
        console.log(res.data, 'iiiiiiiiiiiiiiiiiiiiiiiii77777777777777777777777777777')
        localStorage.setItem('city_name', res.data[0].city_name)
        localStorage.setItem('rating', res.data[0].rating)
    })
}
</script>


<style scoped lang="scss">
.search {
    width: 3.5rem;
    // border-radius: 50%;  
}

.citys {
    width: 100%;
    display: flex;
    // flex-direction: column;
    // background-color: red;


}
</style>